/**
 * Created by Blink on 2017/7/19.
 * navigation list
 */

import React from "react";
import NavigationItem from "./blink.navigation.list.item";
import ClassPath from '../tools/class.path'
import NavigatorAnimateBlock from "./blink.navigation.list.animate.block";

export default class NavigationList extends React.Component {
    static defaultProps = {
        animate: false // active is use animate to draw active block
    };

    constructor() {
        super();
        this.state = {
            activeIndex: 0,
            hoverIndex: -1,
        };
        this.blocks = [];
        this.lastHoverBlock = {
            left: 0,
            width: 0
        };
    }

    // return active index
    get active() {
        return this.state.activeIndex
    }

    set active(v) {
        this.setState({activeIndex: v});
    }

    componentDidMount() {
        this.active = 0;
    }

    render() {
        const {data, className} = this.props;

        // gen data
        let list = [];
        if (data) {
            let i = 0;
            for (let item of data) {
                list.push(
                    <NavigationItem
                        active={this.active === i}
                        icon={item.icon}
                        key={item.name}
                        text={item.text}
                        onClick={(index) => {
                            if (item.onClick) item.onClick(index, data[index]);
                        }}

                        onMouseEnter={(index) => {
                            this.setState({hoverIndex: index})
                        }}

                        index={i}
                        ref={(item) => {
                            if (item)
                                this.blocks[item.props.index] = item;
                        }}
                    />
                );
                i += 1;
            }
        }

        let block;
        if (this.blocks[this.state.activeIndex]) {
            const b = this.blocks[this.state.activeIndex];
            if (b.dom) {
                block = (
                    <NavigatorAnimateBlock zIndex={2} width={b.dom.clientWidth} left={b.dom.offsetLeft}/>
                );
            }
        }

        let hover;
        if (this.state.hoverIndex >= 0 && this.blocks[this.state.hoverIndex]
            && this.blocks[this.state.hoverIndex].dom
        ) {
            const b = this.blocks[this.state.hoverIndex].dom;
            this.lastHoverBlock = {
                left: b.offsetLeft,
                width: b.clientWidth
            };
            hover = (<NavigatorAnimateBlock className="nav-animate-block-transparent"
                                            width={b.clientWidth} left={b.offsetLeft} />)
        } else {
            hover = <NavigatorAnimateBlock left={this.lastHoverBlock.left + (this.lastHoverBlock.width / 2)} className="nav-animate-block-transparent" />
        }

        return (
            <div className="nav-frame">
                {block}
                {hover}
                <ul className={ClassPath("nav", className)} onMouseLeave={() => {
                    this.setState({hoverIndex: -1})
                }}>
                    {list}
                </ul>
            </div>
        );
    }
}
